import React, { Component } from 'react'
import { useNavigate, useSearchParams, NavigateFunction } from "react-router-dom" // 引入路由的钩子函数

interface DetailProps {
    navigate: NavigateFunction;
    query: URLSearchParams;
  }
// 因为类组件不能使用hooks，所以类组件需要使用高阶组件封装
class Detail extends Component<DetailProps> {
  goBack = () => {
    this.props.navigate(-1); // this.history.go(-1)
  }
  render() {
    const { query } = this.props;
    const name = query.get('name'); // 获取到参数
    const age = query.get('age');
    return (
      <div>
        我是类组件
        <div>收到的参数name = {name}, age = {age}</div>
        <div><button onClick={this.goBack}>返回上页面</button></div>
      </div>
    )
  }
}

// 定义了一个高阶组件
const Detail3 = () => { // 用函数组件导出
  const navigate = useNavigate(); // 获取到路由的实例·
  const [query] = useSearchParams();
  return <Detail navigate={navigate} query={query}></Detail>
}

export default Detail3